<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body,
      canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      window.onload = function () {
        var $canvas = document.querySelector("#canvas");
        $canvas.width = window.document.body.clientWidth;
        $canvas.height = window.document.body.clientHeight;
				var ctx = $canvas.getContext("2d");
				
        var data = [{
          value: 0.4,
          color: 'red',
          name: 'JAVA'
        }, {
          value: 0.3,
          color: 'green',
          name: 'PYTHON'
        }, {
          value: 0.2,
          color: 'blue',
          name: 'C++'
        }, {
          value: 0.1,
          color: 'grey',
          name: 'PHP'
        }]

        var x0 = 300, y0 = 300
        var radius = 100
        var tempAngle = -90

        for(var i = 0; i < data.length; i++) {
          var startAngle = tempAngle * Math.PI / 180
          var angle = data[i].value * 360
          var endAngle = (tempAngle + angle) * Math.PI / 180

          ctx.beginPath()
          ctx.moveTo(x0, y0)
          ctx.fillStyle = data[i].color
          ctx.arc(x0, y0, radius, startAngle, endAngle)
          ctx.fill()
          
          tempAngle += angle
        }
      };

      
    </script>
  </body>
</html>
